<template>
  <div class="container">
    <m-header :pubtitle="pubTitle" />
    <div class="ctx-wrap">
      <div class="ctx-top-flex">
        <div class="ctx-top-flex-item">
          <div class="ctx-top-flex-item-title">
            <span class="iconfont iconjibenxinxi icon" />
            <span class="ctx-top-flex-item-title-h2">基本信息</span>
          </div>
          <div class="ctx-top-flex-item-ctx">
            <div class="ctx-top-flex-item-ctx-info">
              <img
                class="ctx-top-flex-item-ctx-info-img"
                src="../../assets/avatar.png"
              />
              <div class="ctx-top-flex-item-ctx-info-group">
                <div class="ctx-top-flex-item-ctx-info-group-h3">Twitter</div>
                <div class="ctx-top-flex-item-ctx-info-group-desc">
                  <span>立场: 建制派</span>
                  <span style="margin-left: 30px">新闻社交账号</span>
                </div>
              </div>
            </div>
            <div class="ctx-top-flex-item-ctx-value">
              <span class="ctx-title">影响力</span>
              <!-- <span class="ctx-progress"></span> -->
              <el-progress
                class="ctx-progress"
                :percentage="50"
                :show-text="false"
                :stroke-width="10"
                color="#5673ff"
              ></el-progress>
              <span class="ctx-value">23423</span>
            </div>
            <div class="ctx-top-flex-item-ctx-desc">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis
              ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas
              accumsan lacus vel
            </div>
          </div>
        </div>
        <div class="ctx-top-flex-item ctx-top-flex-second">
          <div class="ctx-top-flex-item-title bdColor">
            <a
              @click="handleClick(0)"
              :class="[
                'ctx-top-flex-item-title-nav',
                activeIndex === 0 && 'active',
              ]"
              >攻击意图言论</a
            >
            <a
              @click="handleClick(1)"
              :class="[
                'ctx-top-flex-item-title-nav',
                activeIndex === 1 && 'active',
              ]"
              >漏洞分析</a
            >
          </div>
          <div class="ctx-top-flex-item-voice" v-if="activeIndex === 0">
            <ul class="ctx-top-flex-item-ul">
              <!-- <commentComp 
              :desc="item.content"
              :forward="item.repostsCount"
              :comment="item.commentsCount"
              :like="item.favourCount"/>   -->
              <li class="speech-item"
              v-for="(item,index) in gjSpeech"
              :key="index"
              @click="setDialogShow(item.attack)">
                <i class="speech-item-icon"></i>
                <div class="item-content">
                  <p class="item-tit">{{`#${item.stance}`}}</p>
                  <p class="item-txt">{{item.content}}</p>
                </div>
              </li>
            </ul> 
          </div>
          <div class="ctx-top-flex-item-analy" v-if="activeIndex === 1">
            <div class="ctx-top-flex-item-analy-top">
              <img class="img" src="../../assets/power_img.jpg" />
              <div class="ctx-desc">
                <div class="ctx-desc-ctx">
                  港区国安法颁布，遏制了扰乱香港，分裂祖国的反动势力，让香港执法机关终于有法可依。但是香港问题不单单是法律问题，更是社会问题和民心问题。在回归以来，香港社会的舆论长期遭到反...动势力把爱国....港群体无处发声。那么香港问题的由来到底是怎样的呢？我们请到了前港府新闻官冯炜光来和大家一起分享。
                </div>
                <div class="ctx-desc-bottom">
                  <span style="margin-right: 30px">
                    <span class="iconfont iconjibenxinxi icon" /> 07月08日 11:39
                  </span>
                  <span>
                    <span class="iconfont iconjibenxinxi icon" />
                    香港特别行政区
                  </span>
                </div>
              </div>
            </div>
            <div class="ctx-top-flex-item-analy-bottom">
              <div class="bottom-txt1">本国态度: 支持</div>
              <div class="bottom-txt2">处理方式: 不应干涉别过内政</div>
            </div>
          </div>
        </div>
        <div class="ctx-top-flex-item">
          <div class="ctx-top-flex-item-title">
            <span class="iconfont iconredian icon" />
            <span class="ctx-top-flex-item-title-h2">热词分析</span>
          </div>
          <div style="width: 452px; height: 330px" id="wordCloud"></div>
        </div>
      </div>

      <chartWrap
        wrapClass="ctx-sound-group ctx-mt"
        title="声音变化趋势"
        iconClass="el-icon-s-data"
      >
        <div class="item-echarts item-height-500" slot="echarts">
          <themeRiverVue
            :rawData="rawData"
            :rawLegend="rawLegend"
            :xLabel="rawXLabel"
            :topicTxt="topicTxt"
          />
        </div>
      </chartWrap>
    </div>
    <div v-show="dialogShow" class="dialog">
      <div class="dialog-cont">
        <div class="dialog-tit">
          <p class="p1">
            平台判定
          </p>
          <ul class="tit-content">
            <li>
              <p class="tit">攻击主题</p>
              <p class="txt">{{dialogData.attackTopic}}</p>
            </li>
            <li>
              <p class="tit">时间</p>
              <p class="txt">{{dialogData.attackTime}}</p>
            </li>
            <li>
              <p class="tit">攻击方</p>
              <p class="txt">{{dialogData.attacker}}</p>
            </li>
          </ul>
        </div>
        <ul class="dialog-content">
          <li class="item-list"
            v-for="(item,index) in dialogData.attackEvidence"
            :key="index">
            <p class="p1">
              <span class="s1">中国GCD</span>
              <span class="s2">渗透、M主、港D</span>
            </p>
            <p class="p2">攻击证据</p>
            <p class="p3">{{item}}</p>
          </li>
        </ul>
        <i class="el-icon-circle-close" @click="dialogShow = false"></i>
      </div>
      
    </div>
  </div>
</template>

<script>
import mHeader from 'components/mHeader'
import chartWrap from '@/components/ChartWrap';
import themeRiverVue from '@/components/echarts/themeRiver.vue';
import commentComp from '@/components/commentComp';
import {
  getRequest
} from '@/utils/index';
import {
  COLORS
} from '@/constants';
import '../../styles/common/index.scss'
import './power.scss'
export default {
  name: 'power',
  components: {
    mHeader,
    chartWrap,
    themeRiverVue,
    commentComp
  },
  data() {
    return {
      dialogShow:false,//攻击意图言论显示开关
      dialogData:{
        attackTopic: '',                //攻击主题
        attackTime: '',  //攻击时间
        attackTarget: '',               //被攻击方
        attacker: '',                  //攻击方
        attackEvidence: [
          '华山小学大队辅导员带领三名港区国安法颁布，遏制了扰乱香港，分裂祖国的反动势力，让香港执法机关终于有法可依。但是香港问题不单单是法律问题，更是社会问题和民心问题。在回归以来，香港社会的舆论长期遭到反动势力把控，让爱国爱港群体无处发声。那...香港问题的由来到底是怎样的呢？我们请到了前港府新闻官冯炜光来和大家一起分享。 少先队员到西光中学考点执...'
        ]
      },//弹窗数据
      gjSpeech: [ //攻击意图言论
        {
			    createAt: '2020-03-02 00:00:00',   //发布时间
			    contentId: 'c1',                 //内容id
			    content: '华山小学大队辅导员带领三名港区国安法颁布，遏制了扰乱香港，分裂祖国的反动势力，让香港执法机关终于有法可依。但是香港问题不单单是法律问题，更是社会问题和民心问题。在回归以来，香港社会的舆论长期遭到反动势力把控，让爱国爱港群体无处发声。那...香港问题的由来到底是怎样的呢？我们请到了前港府新闻官冯炜光来和大家一起分享。 少先队员到西光中学考点执...',            //内容
			    url: 'http:xxxx',                 // url
			    userId: '123',                  // 用户id
			    userName: 'xxx',               //用户名
          commentsCount: 123,            //评论数
			    repostsCount: 123,            //转发数
			    favourCount: 123,             //点赞数 
			    stance: '建制'  ,               //立场
          attack:{
            attackTopic: 'aaa',                //攻击主题
            attackTime: '2020-03-02 00:00:00',  //攻击时间
            attackTarget: 'aaaa',               //被攻击方
            attacker: 'bbbb',                  //攻击方
            attackEvidence: [               //攻击证据
              '华山小学大队辅导员带领三名港区国安法颁布，遏制了扰乱香港，分裂祖国的反动势力，让香港执法机关终于有法可依。但是香港问题不单单是法律问题，更是社会问题和民心问题。在回归以来，香港社会的舆论长期遭到反动势力把控，让爱国爱港群体无处发声。那...香港问题的由来到底是怎样的呢？我们请到了前港府新闻官冯炜光来和大家一起分享。 少先队员到西光中学考点执...'
            ]            
          }, 
		    },
        {
			    createAt: '2020-03-03 00:00:00',   //发布时间
			    contentId: 'c1',                 //内容id
			    content: '华山小学大队辅导员带领三名港区国安法颁布，遏制了扰乱香港，分裂祖国的反动势力，让香港执法机关终于有法可依。但是香港问题不单单是法律问题，更是社会问题和民心问题。在回归以来，香港社会的舆论长期遭到反动势力把控，让爱国爱港群体无处发声。那...香港问题的由来到底是怎样的呢？我们请到了前港府新闻官冯炜光来和大家一起分享。 少先队员到西光中学考点执...',            //内容
			    url: 'http:xxxx',                 // url
			    userId: '123',                  // 用户id
			    userName: 'xxx',               //用户名
          commentsCount: 123,            //评论数
			    repostsCount: 123,            //转发数
			    favourCount: 123,             //点赞数 
			    stance: '建制'  ,               //立场
          attack:{
            attackTopic: 'aaa',                //攻击主题
            attackTime: '2020-03-03 00:00:00',  //攻击时间
            attackTarget: 'xxx',               //被攻击方
            attacker: 'yyy',                  //攻击方
            attackEvidence: [               //攻击证据
              '华山小学大队辅导员带领三名港区国安法颁布，遏制了扰乱香港，分裂祖国的反动势力，让香港执法机关终于有法可依。但是香港问题不单单是法律问题，更是社会问题和民心问题。在回归以来，香港社会的舆论长期遭到反动势力把控，让爱国爱港群体无处发声。那...香港问题的由来到底是怎样的呢？我们请到了前港府新闻官冯炜光来和大家一起分享。 少先队员到西光中学考点执',
              '华山小学大队辅导员带领三名港区国安法颁布，遏制了扰乱香港，分裂祖国的反动势力，让香港执法机关终于有法可依。但是香港问题不单单是法律问题，更是社会问题和民心问题。在回归以来，香港社会的舆论长期遭到反动势力把控，让爱国爱港群体无处发声。那...香港问题的由来到底是怎样的呢？我们请到了前港府新闻官冯炜光来和大家一起分享。 少先队员到西光中学考点执',
              '华山小学大队辅导员带领三名港区国安法颁布，遏制了扰乱香港，分裂祖国的反动势力，让香港执法机关终于有法可依。但是香港问题不单单是法律问题，更是社会问题和民心问题。在回归以来，香港社会的舆论长期遭到反动势力把控，让爱国爱港群体无处发声。那...香港问题的由来到底是怎样的呢？我们请到了前港府新闻官冯炜光来和大家一起分享。 少先队员到西光中学考点执',
              '2华山小学大队辅导员带领三名港区国安法颁布，遏制了扰乱香港，分裂祖国的反动势力，让香港执法机关终于有法可依。但是香港问题不单单是法律问题，更是社会问题和民心问题。在回归以来，香港社会的舆论长期遭到反动势力把控，让爱国爱港群体无处发声。那...香港问题的由来到底是怎样的呢？我们请到了前港府新闻官冯炜光来和大家一起分享。 少先队员到西光中学考点执'
            ]            
          }, 
		    },
	    ],
      pubTitle: '',
      activeIndex: 0,
      rawData: [
        [10, 15, 35, 38, 22, 16, 7, 2, 17, 33, 40, 32, 26, 35, 40, 32, 26, 22, 16, 22, 10],
        [35, 36, 37, 22, 24, 26, 34, 21, 18, 45, 32, 35, 30, 28, 27, 26, 15, 30, 35, 42, 42],
        [21, 25, 27, 23, 24, 21, 35, 39, 40, 36, 33, 43, 40, 34, 28, 26, 37, 41, 46, 47, 41],
        [10, 15, 35, 38, 22, 16, 7, 2, 17, 33, 40, 32, 26, 35, 40, 32, 26, 22, 16, 22, 10, ]
      ],
      rawLegend: ['涉军', '涉政', '社会', '其它'],
      rawXLabel: [
        '2020-09-01 16:32', '2020-09-02 16:32', '2020-09-03 16:32', '2020-09-04 16:32', '2020-09-05 16:32', '2020-09-06 16:32', '2020-09-07 16:32', '2020-09-08 16:32', '2020-09-09 16:32', '2020-09-10 16:32', '2020-09-11 16:32', '2020-09-12 16:32', '2020-09-13 16:32', '2020-09-14 16:32', '2020-09-15 16:32', '2020-09-16 16:32', '2020-09-17 16:32', '2020-09-18 16:32', '2020-09-19 16:32', '2020-09-20 16:32', '2020-09-21 16:32'
      ],
      topicTxt: [
        {'tit':'反國安法大遊行：不屈的香港人','time':'2020-09-01 16:32'},
        {'tit':'香港已不能在自由市场竞争','time':'2020-09-04 16:32'},
        {'tit':'中国香港国安法立法无可非议','time':'2020-09-08 16:32'},
        {'tit':'我们没有放弃为香港争取民主','time':'2020-09-08 16:32'},
        {'tit':'美國有意終止與香港的引渡協議','time':'2020-09-14 16:32'},
        {'tit':'香港各界：国安法守护香港','time':'2020-09-18 16:32'}
      ]
    }
  },
  mounted() {
    const pubTitle = getRequest('pubTitle');
    this.pubTitle = pubTitle;
    this.drawWordCloud();
  },
  methods: {
    handleClick(val) {
      this.activeIndex = val;
    },
    setDialogShow(item) {
      this.dialogData = Object.assign({},item)
      this.dialogData.attackTime = this.dialogData.attackTime.substring(0,10)
      this.dialogShow = true
    },
    drawWordCloud() {
      const myChart = this.$echarts.init(document.getElementById('wordCloud'));
      const option = {
        "backgroundColor": "#1f2025",
        "tooltip": {
          "show": true,
          "textStyle": {
            "fontSize": "16",
            "color": "#3c3c3c"
          },
          "backgroundColor": "#fff",
          "borderColor": "#ddd",
          "borderWidth": 1
        },
        "series": [{
          "name": "热词排行",
          "type": "wordCloud",
          "gridSize": 30,
          "sizeRange": [14, 36],
          "rotationRange": [0, 0],
          "shape": "circle",
          "autoSize": {
            "enable": true,
            "minSize": 14
          },
          "data": [{
              "name": "香港",
              "value": 500,
              "textStyle": {
                "normal": {
                  "color": COLORS[1]
                }
              }
            }, {
              "name": "国安公署",
              "value": 360,
              "textStyle": {
                "normal": {
                  "color": COLORS[1]
                }
              }
            }, {
              "name": "国安法",
              "value": 361,
              "textStyle": {
                "normal": {
                  "color": COLORS[1]
                }
              }
            }, {
              "name": "美国",
              "value": 362,
              "textStyle": {
                "normal": {
                  "color": COLORS[1]
                }
              }
            },
            {
              "name": "中央",
              "value": 282,
              "textStyle": {
                "normal": {
                  "color": COLORS[0]
                }
              }
            },
            {
              "name": "驻港部队",
              "value": 262,
              "textStyle": {
                "normal": {
                  "color": COLORS[0]
                }
              }
            },
            {
              "name": "暴力",
              "value": 262,
              "textStyle": {
                "normal": {
                  "color": COLORS[0]
                }
              }
            },
            {
              "name": "警告",
              "value": 262,
              "textStyle": {
                "normal": {
                  "color": COLORS[0]
                }
              }
            },
            {
              "name": "破坏",
              "value": 242,
              "textStyle": {
                "normal": {
                  "color": COLORS[4]
                }
              }
            },
            {
              "name": "国旗",
              "value": 272,
              "textStyle": {
                "normal": {
                  "color": COLORS[4]
                }
              }
            },
            {
              "name": "内地",
              "value": 277,
              "textStyle": {
                "normal": {
                  "color": COLORS[4]
                }
              }
            },
            {
              "name": "港独",
              "value": 265,
              "textStyle": {
                "normal": {
                  "color": COLORS[4]
                }
              }
            },
            {
              "name": "国歌",
              "value": 252,
              "textStyle": {
                "normal": {
                  "color": COLORS[4]
                }
              }
            }
          ]
        }]
      }
      myChart.setOption(option);
    }
  }
}
</script>
